<template>
  <div>
    <h1 v-color>App-----{{ data }}</h1>
    <h2 @click="addComSp">App--computed()-----{{ comSp }}</h2>
    <button @click="appNum">App=>num++</button>
    <hr />
    <Child1 :data="data" ref="Child1Ref" />
    <hr />
    <Child3 />
  </div>
</template>

<script setup lang='ts'>
import { isReactive, isRef, reactive, ref, toRef, toRefs, unref, isProxy, nextTick, Ref, computed } from 'vue'
import Child1 from './components/Children/compositionApi/Child1.vue';
import Child3 from './components/Children/compositionApi/Child3.vue';
const Child1Ref = ref<null | Ref>(null)
nextTick(() => {
  // console.log(Child1Ref);

})
const appNum = () => {
  Child1Ref.value && Child1Ref.value.addData()

}
const comSp = ref(0)
const com = computed({ get: () => 0, set: (val) => { comSp.value += val } })
const addComSp = () => {
  com.value = 1
  console.log(comSp.value);
}


const arrList = reactive({ name: "chel", age: 18, gender: 'female' })
// const { name, age, gender } = { ...toRefs(arrList) }
// console.log(isRef(name)); ============> true
// const name = toRef(arrList, 'name')
// console.log(isRef(name)); ============> true
// console.log(isProxy(arrList)); ============> true
// const pro = new Proxy({}, {})
// console.log(isProxy(pro)); =============> false

const data = ref(0)



</script>
<style lang='less' scoped>
</style>